<template>
  <div class="main2">
    <div class="main-top" ref="asd">水位站动态水位监测</div>
    <div class="main-bottom">
      <div class="charts">
        <div id="myChart" ref="myChart" :style="{width: '100%', height: '245px'}"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { getTimeSeconds } from "../../../utils/myMethod";
export default {
   name: "rain",
  data() {
    return {
      dataX: [],
      dataY: [],
      search: {
        time: getTimeSeconds(new Date())
      }
    };
  },
  created() {
    this.getList().then(res => {
      this.drawLine(res);
    });
  },
  methods: {
    getList() {
      let _this = this;
      let time = _this.search.time;
      return new Promise(function(resolve, reject) {
        _this.$http
          .post("dataMsg/getDayDetailAll", {
            time: _this.search.time,
            companyId: localStorage.getItem("companyId"),
            dateType: "month"
          })
          .then(res => {
            if (res.data.length == 0) {
              _this.$message({
                message: "该时间设备暂无数据,请选择其他时间查询",
                type: "warning",
                center: true
              });
              // return;
            }
            // ;
            let dataX = [];
            let dataYmaxLevel = [];
            let dataYminLevel = [];
            let dataYavgLevel = [];

            console.log("kkk", res);

            let arr = res.data;

            arr.forEach(element => {
              if (element.minLevel == null) {
                //后台没有 minLevel 这个字段传过来 所以出错
                element.minLevel = 0;
              }
              dataX.push(
                element.stationName +
                  "\n(水位" +
                  parseFloat(element.waterLevel).toFixed(2) +
                  "CM)"
              );
              dataYmaxLevel.push(element.maxLevel.toFixed(2));

              dataYminLevel.push(element.minLevel.toFixed(2));

              dataYavgLevel.push(element.avgLevel.toFixed(2));
            });

            _this.dataX = dataX;
            _this.dataYmaxLevel = dataYmaxLevel;
            _this.dataYminLevel = dataYminLevel;
            _this.dataYavgLevel = dataYavgLevel;
            resolve({ dataX, dataYmaxLevel, dataYminLevel, dataYavgLevel });
          });
      });
    },
    drawLine(res) {
      // 基于准备好的dom，初始化echarts实例
      console.log(res, 999999990);
      let myChart = this.$Echarts.init(this.$refs.myChart);
      // 绘制图表
      let option = {
        color: ["#FE2C75", "#2E74FE", "#0DE779"],
        legend: {
          data: ["最高水位", "最低水位", "平均水位"]
        },
        // title: {
        //   text: "水位月统计（单位:CM）"
        // },
        backgroundColor: "#ffffff", //整体背景色
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          },
          backgroundColor: "rgba(36,37,41,0.8);", // tooltip的背景色
          formatter: function(params) {
            var str = "<div><p>" + params[0].name + "</p></div>";
            if (params[0] != undefined) {
              str +=
                "<p>" + params[0].seriesName + ":" + params[0].value + "CM</p>";
            }
            if (params[1] != undefined) {
              str +=
                "<p>" + params[1].seriesName + ":" + params[1].value + "CM</p>";
            }
            if (params[2] != undefined) {
              str +=
                "<p>" + params[2].seriesName + ":" + params[2].value + "CM</p>";
            }
            return str;
          }
        },
        grid: {
          //控制整体布局
          left: "0",
          right: "0",
          bottom: "0",
          top: "15%",
          containLabel: true
        },
        // x轴
        xAxis: {
          data: res.dataX.map(function(str) {
            return str.replace(" ", "\n");
          }),
          splitLine: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: "#DFE3E9", // x轴颜色
              width: 1 // 粗细
            }
          },
          axisLabel: {
            color: "#999999", // x轴刻度名称颜色
            interval: 0, //代表显示所有x轴标签显示
            rotate: 45 //代表逆时针旋转45度
          }
        },
        yAxis: {
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed"
            }
          },
          axisLabel: {
            color: "#999999", // y轴刻度名称颜色
            formatter: function(value) {
              var value;
              if (value >= 1000) {
                value = value / 1000 + "K";
              } else if (value < 1000) {
                value = value;
              }
              return value;
            }
          },
          axisTick: {
            //y轴刻度线
            show: false
          },
          axisLine: {
            //y轴
            show: false
          }
        },
        series: [
          {
            name: "最高水位",
            type: "bar",
            data: res.dataYmaxLevel,
            // data: [
            //   520,
            //   434,
            //   442,
            //   434,
            //   423,
            //   411,
            //   432,
            //   452,
            //   434,
            //   490,
            //   420,
            //   432,
            //   401,
            //   434
            // ],
            // itemStyle: {
            //   normal: {
            //     color: "#4285F4" // 柱状图颜色
            //   }
            // },
            // label: {
            //   color:'#4040e2'
            // },
            barWidth: 12
          },
          {
            name: "最低水位",
            type: "bar",
            // label: {
            //   color:'#4040e2'
            // },
            data: res.dataYminLevel,
            // data: [20, 34, 42, 34, 23, 11, 32, 52, 34, 90, 20, 32, 61, 34],
            // itemStyle: {
            //   normal: {
            //     color: "#4285F4" // 柱状图颜色
            //   }
            // },
            // label: {
            //  color:'#4040e2'
            // },
            barWidth: 12
          },
          {
            name: "平均水位",
            type: "bar",
            data: res.dataYavgLevel,
            // data: [
            //   123,
            //   145,
            //   114,
            //   110,
            //   98,
            //   88,
            //   132,
            //   123,
            //   111,
            //   109,
            //   78,
            //   99,
            //   55,
            //   99
            // ],
            // itemStyle: {
            //   normal: {
            //     color: "#4285F4" // 柱状图颜色
            //   }
            // },
            label: {
              // show: true
            },
            barWidth: 12
          }
        ]
      };
      myChart.setOption(option);
    },
    getAddBook() {
      this.getList().then(res => {
        this.drawLine(res);
      });
    },
    empty() {
      this.search = {
        time: getTimeSeconds(new Date())
      };
      this.getList().then(res => {
        this.drawLine(res);
      });
    }
  }
};
</script>

<style scoped lang="less">
.main2 {
  background: #fff;
  box-shadow: 0px 0px 10px 0px rgba(102, 102, 102, 0.3);
  height: 310px;
  .main-top {
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    padding-left: 20px;
    text-align: left;
  }
  .main-bottom {
    height: 270px;
    // background: red;
  }
}
</style>